<template>
  <div class="extensionTabs">
    <template v-if="orderType === 'supplier'">
      <!--供应商的提现记录-->
      <div v-for="(model, i) in listData" :key="i">
        <div class="tbs">
          <ul class="item2">
            <li>{{ model.apply_sn }}</li>
            <li>{{ model.created_at }}</li>
          </ul>
          <div class="item3">
            <span class="red">{{ $i18n.t("money") }}{{ model.apply_money }}</span>
            <p v-if="orderType === 'supplier'" :class="model.status_obj.name == '未结算' ? 'no-red' : ''">{{ model.status_obj.name }}</p>
          </div>
          <div class="itemBtn" v-if="model.new_wx_transfer == 1">
            <div class="btn" @click="confirmReceipt(model.id)">确认收款</div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div v-for="(model, i) in listData" :key="i">
        <div class="tbs" @click="toDetail(model.id)">
          <ul class="item2">
            <li>{{ model.type_name }}</li>
            <span class="red">{{ model.status_name }}</span>
          </ul>
          <div class="item3">
            <li class="amounts">{{ $i18n.t("money") }}{{ model.amounts }}</li>
            <span class="amounts">{{ model.created_at }}</span>
          </div>
          <div class="itemBtn" v-if="model.new_wx_transfer == 1">
            <div class="btn" @click.stop="confirmReceipt(model.id)">确认收款</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    orderType: {
      type: String,
      default: "extension"
    }
  },
  data() {
    return {};
  },
  activated() {},
  methods: {
    toDetail(id) {
      this.$router.push(this.fun.getUrl("presentationDetails", { record_id: id }));
    },
    confirmReceipt(id) {
      this.$router.push(this.fun.getUrl("wechatWithdrawal", { id: id, orderType: this.orderType }));
    }
  }
};
</script>
<style lang="scss" scoped>
.tbs {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.625rem 0.75rem;
  margin: 0.4rem 0.75rem 0.625rem 0.75rem;
  border-radius: 0.5rem;
  .itemBtn {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    .btn {
      background: var(--themeBaseColor);
      padding: 0.5rem 0.75rem;
      box-sizing: border-box;
      border-radius: 0.75rem;
    }
  }
  .item2 {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    text-align: left;

    li:last-child {
      font-size: 0.75rem;
      font-weight: 400;
      color: #6e6e79;
    }
    li:first-child {
      font-size: 0.8125rem;
      font-weight: bold;
      color: #00001c;
      margin-bottom: 0.3438rem;
      white-space: nowrap;
    }
  }

  .item3 {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    text-align: left;
    p {
      font-weight: 400;
      color: #6e6e79;
      font-size: 0.75rem;
    }
  }
  .red {
    color: #f15353;
    font-weight: 500;
    font-size: 0.85rem;
  }

  .no-red {
    color: #f15353;
  }

  .green {
    color: green;
  }

  .yellow {
    color: yellow;
  }

  .reduce {
    color: #e51c23;
  }

  span {
    display: inline-block;
    font-size: 0.9375rem;
    margin-bottom: 0.4688rem;
  }

  .amounts {
    font-weight: 400;
    color: #6e6e79;
    font-size: 0.75rem;
  }
}
</style>
